feat: copy 支持富文本 (#2695)

docs/zh-CN/components/action.md

@@ -555,6 +555,18 @@ icon 也可以是 url 地址，比如
 }
 ```
 
+可以通过 `copyFormat` 设置复制的格式，默认是文本
+
+```schema: scope="body"
+{
+    "label": "复制一段富文本",
+    "type": "button",
+    "actionType": "copy",
+    "copyFormat": "text/html",
+    "content": "<a href='http://www.baidu.com'>link</a> <b>bold</b>"
+}
+```
+
 **属性表**
 
 | 属性名     | 类型                                 | 默认值 | 说明                                 |

docs/zh-CN/start/getting-started.md

@@ -664,10 +664,10 @@ class MyComponent extends React.Component<any, any> {
 ##### copy
 
 ```ts
-(contents: string, options?: {shutup: boolean})
+(contents: string, options?: {silent: boolean, format?: string})
 ```
 
-用来实现内容复制。
+用来实现内容复制，其中 `format` 可以为 text/html，或 text/plain
 
 ##### session
 

examples/components/Play.jsx

@@ -190,8 +190,8 @@ export default class PlayGround extends React.Component {
         toast[type] ? toast[type](msg) : console.warn('[Notify]', type, msg),
       alert,
       confirm,
-      copy: content => {
+      copy: (content, options) => {
-        copy(content);
+        copy(content, options);
         toast.success(__('System.copy'));
       }
     };

examples/components/SchemaRender.jsx

@@ -116,8 +116,8 @@ export default function (schema, showCode, envOverrides) {
             return axios[method](url, data, config);
           },
           isCancel: value => axios.isCancel(value),
-          copy: content => {
+          copy: (content, options) => {
-            copy(content);
+            copy(content, options);
             toast.success('内容已复制到粘贴板');
           },
           blockRouting: fn => {

examples/embed.tsx

@@ -176,7 +176,7 @@ export function embed(
   const amisEnv = {
     getModalContainer: () =>
       env?.getModalContainer?.() || document.querySelector('.amis-scope'),
-    notify: (type: string, msg: string) =>
+    notify: (type: 'success' | 'error' | 'warning' | 'info', msg: string) =>
       toast[type] ? toast[type](msg) : console.warn('[Notify]', type, msg),
     alert,
     confirm,
@@ -283,7 +283,7 @@ export function embed(
       }
 
       // 支持返回各种报错信息
-      config.validateStatus = function (status) {
+      config.validateStatus = function () {
         return true;
       };
 
@@ -320,8 +320,8 @@ export function embed(
     },
     isCancel: (value: any) => (axios as any).isCancel(value),
     copy: (contents: string, options: any = {}) => {
-      const ret = copy(contents, options);
+      const ret = copy(contents);
-      ret && options.shutup !== true && toast.info(__('System.copy'));
+      ret && options.silent !== true && toast.info(__('System.copy'));
       return ret;
     },
     richTextToken: '',

examples/mobile.jsx

@@ -39,7 +39,7 @@ class AMISComponent extends React.Component {
             responseType,
             config, // 其他配置
             headers // 请求头
-          }: any) => {
+          }) => {
             config = {
               dataType: 'json',
               ...config
@@ -52,7 +52,7 @@ class AMISComponent extends React.Component {
             }
 
             // 支持返回各种报错信息
-            config.validateStatus = function (status) {
+            config.validateStatus = function () {
               return true;
             };
 
@@ -77,9 +77,9 @@ class AMISComponent extends React.Component {
             }
             return response;
           },
-          isCancel: (value: any) => (axios as any).isCancel(value),
+          isCancel: value => axios.isCancel(value),
-          copy: content => {
+          copy: (content, optinos) => {
-            copy(content);
+            copy(content, optinos);
             toast.success('内容已复制到粘贴板');
           }
         })}
@@ -88,6 +88,6 @@ class AMISComponent extends React.Component {
   }
 }
 
-export function bootstrap(mountTo, initalState) {
+export function bootstrap(mountTo) {
   render(<AMISComponent />, mountTo);
 }

src/RootRenderer.tsx

@@ -116,12 +116,14 @@ export class RootRenderer extends React.Component<RootRendererProps> {
       );
     } else if (action.actionType === 'email') {
       const mailTo = filter(action.to, ctx);
-      const mailInfo = mapValues(pick(action, 'to', 'cc', 'bcc', 'subject', 'body'), val => filter(val, ctx));
+      const mailInfo = mapValues(
+        pick(action, 'to', 'cc', 'bcc', 'subject', 'body'),
+        val => filter(val, ctx)
+      );
       const mailStr = qs.stringify(mailInfo);
       const mailto = `mailto:${mailTo}?${mailStr}`;
 
       window.open(mailto);
-
     } else if (action.actionType === 'dialog') {
       store.setCurrentAction(action);
       store.openDialog(ctx);
@@ -159,7 +161,10 @@ export class RootRenderer extends React.Component<RootRendererProps> {
       action.actionType === 'copy' &&
       (action.content || action.copy)
     ) {
-      env.copy && env.copy(filter(action.content || action.copy, ctx, '| raw'));
+      env.copy &&
+        env.copy(filter(action.content || action.copy, ctx, '| raw'), {
+          format: action.copyFormat
+        });
     }
   }
 

src/env.tsx

@@ -41,7 +41,7 @@ export interface RendererEnv {
     schema: Schema,
     props: any
   ) => null | RendererConfig;
-  copy?: (contents: string) => void;
+  copy?: (contents: string, format?: any) => void;
   getModalContainer?: () => HTMLElement;
   theme: ThemeInstance;
   affixOffsetTop: number;

src/factory.tsx

@@ -99,7 +99,7 @@ export interface RenderOptions {
     schema: Schema,
     props: any
   ) => null | RendererConfig;
-  copy?: (contents: string) => void;
+  copy?: (contents: string, options?: any) => void;
   getModalContainer?: () => HTMLElement;
   loadRenderer?: (
     schema: Schema,

src/renderers/Action.tsx

@@ -347,6 +347,7 @@ const ActionProps = [
   'mergeData',
   'index',
   'copy',
+  'copyFormat',
   'payload',
   'requireSelected'
 ];

src/renderers/Copyable.tsx

@@ -32,54 +32,56 @@ export interface CopyableProps extends RendererProps {
   copyable: SchemaCopyable;
 }
 
-export const HocCopyable = () => (Component: React.ComponentType<any>): any => {
+export const HocCopyable =
-  class QuickEditComponent extends React.PureComponent<CopyableProps, any> {
+  () =>
-    static ComposedComponent = Component;
+  (Component: React.ComponentType<any>): any => {
-    handleClick(content: string) {
+    class QuickEditComponent extends React.PureComponent<CopyableProps, any> {
-      const {env} = this.props;
+      static ComposedComponent = Component;
-      env.copy && env.copy(content);
+      handleClick(content: string) {
-    }
+        const {env, copyFormat} = this.props;
-    render() {
+        env.copy && env.copy(content, {format: copyFormat});
-      const {
+      }
-        copyable,
+      render() {
-        name,
+        const {
-        className,
+          copyable,
-        data,
+          name,
-        noHoc,
+          className,
-        classnames: cx,
+          data,
-        translate: __
+          noHoc,
-      } = this.props;
+          classnames: cx,
-
+          translate: __
-      if (copyable && !noHoc) {
+        } = this.props;
-        const content = filter(
+
-          (copyable as SchemaCopyableObject).content ||
+        if (copyable && !noHoc) {
-            '${' + name + ' | raw }',
+          const content = filter(
-          data
+            (copyable as SchemaCopyableObject).content ||
-        );
+              '${' + name + ' | raw }',
-        if (content) {
+            data
-          return (
+          );
-            <Component
+          if (content) {
-              {...this.props}
+            return (
-              className={cx(`Field--copyable`, className)}
+              <Component
-            >
+                {...this.props}
-              <Component {...this.props} wrapperComponent={''} noHoc />
+                className={cx(`Field--copyable`, className)}
-              <a
+              >
-                key="edit-btn"
+                <Component {...this.props} wrapperComponent={''} noHoc />
-                data-tooltip={__('Copyable.tip')}
+                <a
-                className={cx('Field-copyBtn')}
+                  key="edit-btn"
-                onClick={this.handleClick.bind(this, content)}
+                  data-tooltip={__('Copyable.tip')}
-              >
+                  className={cx('Field-copyBtn')}
-                <Icon icon="copy" className="icon" />
+                  onClick={this.handleClick.bind(this, content)}
-              </a>
+                >
-            </Component>
+                  <Icon icon="copy" className="icon" />
-          );
+                </a>
-        }
+              </Component>
+            );
+          }
+        }
+        return <Component {...this.props} />;
       }
-      return <Component {...this.props} />;
     }
-  }
+    hoistNonReactStatic(QuickEditComponent, Component);
-  hoistNonReactStatic(QuickEditComponent, Component);
+    return QuickEditComponent;
-  return QuickEditComponent;
+  };
-};
 
 export default HocCopyable;