@alifd/chat 0.2.0-beta.1 → 0.2.0-beta.2

package/es/HTMLRenderer/index.d.ts

@@ -0,0 +1,4 @@
+import { HTMLRendererProps } from './types';
+export * from './types';
+declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<HTMLRendererProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, unknown, {}>;
+export default _default;

package/es/HTMLRenderer/index.js

@@ -0,0 +1,138 @@
+/**
+ * @component HTML 渲染器
+ * @en HTML Renderer
+ * @type 通用 - General
+ * @remarks HTML 渲染组件用于解析和渲染 HTML 字符串，同时提供图片预览、链接处理和文本复制等功能。 - HTML renderer component used to parse and render HTML strings, with additional features such as image zoom, link handling, text copying and so on.
+ * @when 需要解析和渲染 HTML 字符串时使用。 - Use when you need to parse and render HTML strings.
+ */
+import React, { memo, useMemo } from 'react';
+import classnames from 'classnames';
+import sanitizeHtml from 'sanitize-html';
+import parse, { domToReact, Element } from 'html-react-parser';
+import { PhotoProvider } from 'react-photo-view';
+import qs from 'query-string';
+import ImagePreview from '../ImagePreview';
+import { ConfigProvider } from '@alifd/next';
+import { assignSubComponent } from '../utils';
+const sanitizeHtmlOptions = {
+    allowedTags: sanitizeHtml.defaults.allowedTags.concat([
+        'acronym', 'audio', 'big', 'center', 'del', 'dir', 'font',
+        'img', 'ins', 'source', 'strike', 'track', 'tt', 'video',
+    ]),
+    allowedAttributes: {
+        '*': ['data-*', 'title', 'align', 'bgcolor', 'class', 'style'],
+        a: ['href', 'download'],
+        audio: ['controls', 'crossorigin', 'loop', 'muted', 'preload', 'src'],
+        br: ['clear'],
+        caption: ['align'],
+        col: ['span'],
+        colgroup: ['span'],
+        font: ['color', 'face', 'size'],
+        hr: ['color', 'noshade', 'size'],
+        img: ['alt', 'src', 'crossorigin', 'decoding', 'sizes', 'srcset', 'align', 'width', 'height'],
+        li: ['value', 'type'],
+        ol: ['reversed', 'start', 'type'],
+        source: ['sizes', 'src', 'srcset', 'type', 'media'],
+        table: ['border', 'cellpadding', 'cellspacing', 'frame', 'rules', 'summary'],
+        td: ['headers', 'colspan', 'rowspan'],
+        th: ['headers', 'colspan', 'rowspan'],
+        track: ['default', 'kind', 'label', 'src', 'srclang'],
+        ul: ['type'],
+        video: ['controls', 'crossorigin', 'loop', 'muted', 'preload', 'src', 'poster', 'width', 'height'],
+    },
+    enforceHtmlBoundary: false,
+    disallowedTagsMode: 'discard',
+    allowedSchemes: ['http', 'https', 'ftp', 'mailto', 'tel', 'message', 'copy', 'dingtalk', 'dtmd'],
+    allowedSchemesAppliedToAttributes: ['href', 'src', 'cite'],
+    allowProtocolRelative: false,
+};
+const HTMLRenderer = memo(function HTMLRenderer({ className, children, imagePreview, loose, handleOpenLink, sendTextMessage, copyText, i18n }) {
+    // 处理钉钉特定链接
+    function handleDingtalkUrl(href) {
+        return () => {
+            const { query } = qs.parseUrl(href);
+            const { content, url, _assistant_adaptation, context } = query;
+            if (_assistant_adaptation === 'false') {
+                delete query._assistant_adaptation;
+                const newUrl = qs.stringifyUrl({ url: href, query }, { sort: false });
+                handleOpenLink === null || handleOpenLink === void 0 ? void 0 : handleOpenLink(newUrl);
+                return;
+            }
+            let contextObj;
+            try {
+                contextObj = JSON.parse(context || '');
+            }
+            catch (e) {
+                contextObj = {};
+            }
+            if (contextObj.allowToDingtalk && contextObj.allowToDingtalk === true) {
+                handleOpenLink === null || handleOpenLink === void 0 ? void 0 : handleOpenLink(href);
+            }
+            else if (content) {
+                sendTextMessage === null || sendTextMessage === void 0 ? void 0 : sendTextMessage(`${content}`);
+            }
+            else if (url) {
+                handleOpenLink === null || handleOpenLink === void 0 ? void 0 : handleOpenLink(url === null || url === void 0 ? void 0 : url.toString());
+            }
+            else {
+                handleOpenLink === null || handleOpenLink === void 0 ? void 0 : handleOpenLink(href);
+            }
+        };
+    }
+    const parserOptions = {
+        replace: domNode => {
+            if (domNode instanceof Element && domNode.attribs) {
+                const { name } = domNode;
+                if (name === 'a') {
+                    const element = (domToReact([domNode]));
+                    const { props } = element;
+                    if (props.href && props.href.startsWith('message://')) {
+                        const msgValue = decodeURIComponent(props.href.slice(10));
+                        return React.cloneElement(element, {
+                            onClick: () => sendTextMessage === null || sendTextMessage === void 0 ? void 0 : sendTextMessage(msgValue),
+                            href: undefined
+                        });
+                    }
+                    if (props.href && props.href.startsWith('copy://')) {
+                        const copyValue = decodeURIComponent(props.href.slice(7));
+                        return React.cloneElement(element, {
+                            onClick: copyText === null || copyText === void 0 ? void 0 : copyText(copyValue, i18n),
+                            href: undefined
+                        });
+                    }
+                    if (props.href && /^dtmd:\/\/dingtalkclient|^dingtalk:\/\/dingtalkclient\/action\/jumprobot|^(https?:)?\/\/qr.dingtalk.com\/action\/jumprobot/.test(props.href)) {
+                        return React.cloneElement(element, {
+                            onClick: handleDingtalkUrl(props.href),
+                            href: undefined
+                        });
+                    }
+                    return React.cloneElement(element, {
+                        target: '_blank',
+                    });
+                }
+                if (name === 'img') {
+                    const element = (domToReact([domNode]));
+                    if (imagePreview) {
+                        return React.createElement(ImagePreview, { className: "image", src: element.props.src }, element);
+                    }
+                    else {
+                        return element;
+                    }
+                }
+            }
+        }
+    };
+    const element = useMemo(() => {
+        return parse(sanitizeHtml(children || '', sanitizeHtmlOptions), parserOptions);
+    }, [children]);
+    return (React.createElement("div", { className: classnames('box', className, {
+            'loose': loose,
+        }) }, imagePreview ?
+        React.createElement(PhotoProvider, null, element)
+        : element));
+});
+const HTMLRendererWithSub = assignSubComponent(HTMLRenderer, {
+    displayName: 'HTMLRenderer',
+});
+export * from './types';
+export default ConfigProvider.config(HTMLRendererWithSub);

package/es/HTMLRenderer/index.less

@@ -0,0 +1,194 @@
+@import '../../var.less';
+
+.box {
+  font-size: 14px;
+  // color: hsla(230, 10%, 11%, 0.9);
+  word-break: break-word;
+  font-family: inherit;
+  .loose& {
+    font-size: 16px;
+    line-height: 1.85;
+  }
+  @media print {
+    color: #000 !important;
+    font-family: 'Times New Roman', Times, serif;
+  }
+  body:global(.dark) & {
+    filter: invert(1) hue-rotate(180deg);
+  }
+  img, video, iframe {
+    body:global(.dark) & {
+      filter: hue-rotate(180deg) invert(1);
+    }
+  }
+  img {
+    body:global(.dark) & {
+      background: #fff;
+    }
+    body:global(.dark.dim) & {
+      filter: hue-rotate(180deg) brightness(.75) invert(1);
+    }
+  }
+  body:global(.dark) & :global(.symbolic) > img {
+    filter: none;
+    background: none;
+  }
+  h1, h2, h3, h4, h5, h6, p, blockquote, table, .syntax-highlighter {
+    margin: 0;
+    .loose& {
+      margin: 20px 0;
+    }
+  }
+  h1, h2, h3, h4, h5, h6 {
+    font-weight: bold;
+  }
+  h1 {
+    font-size: 18px;
+    line-height: 1.8;
+    .loose& {
+      font-size: 28px;
+    }
+  }
+  h2 {
+    font-size: 16px;
+    line-height: 1.8;
+    .loose& {
+      font-size: 24px;
+    }
+  }
+  h3, h4, h5, h6 {
+    font-size: 14px;
+    line-height: 1.9;
+  }
+  h3 {
+    .loose& {
+      font-size: 18px;
+    }
+  }
+  h4, h5, h6 {
+    .loose& {
+      font-size: 16px;
+    }
+  }
+  img, video, .image {
+    max-width: 100%!important;
+    height: auto!important;
+    &:only-child {
+      display: block;
+      margin: 10px auto;
+    }
+  }
+  .image:only-child {
+    width: fit-content;
+  }
+  .image img {
+    margin: 0;
+  }
+  code {
+    margin: 0 .15em;
+    padding: .12em .25em;
+    border-radius: 3px;
+    font-size: 86%;
+    background: rgba(27,31,35,.05);
+  }
+  pre {
+    font-size: 14px;
+    line-height: 1.6;
+    border-radius: 2px;
+    border: 6px solid transparent;
+    overflow: auto;
+    margin: 0;
+    code {
+      font-size: 14px;
+      padding: 0;
+      margin: 0;
+      border: none;
+      font-size: inherit;
+      background: none;
+      border-radius: 0;
+    }
+  }
+  table, td, th {
+    border: 1px solid #caccce;
+    body:global(.dark) & {
+      border-color: #babcbd;
+      // border-color: #c9cace;
+    }
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+  table {
+    line-height: 1.6;
+    margin: 10px auto;
+    border-spacing: none;
+    border-collapse: collapse;
+    empty-cells: show;
+    font-size: 14px;
+    .loose& p {
+      margin: 0;
+    }
+  }
+  td, th {
+    border: 1px solid #e3e3e3;
+    padding: 10px 12px;
+    line-height: 1.3;
+    p {
+      margin: 0;
+    }
+  }
+  th {
+    background: hsla(230, 90%, 11%,.03);
+  }
+  a, a:visited {
+    color: #0080FF;
+    text-decoration: none;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+  ul, ol {
+    list-style: revert;
+    padding-left: 16px;
+    .loose& {
+      padding-left: 30px;
+    }
+  }
+  li {
+    list-style: revert;
+  }
+  blockquote {
+    opacity: 1;
+    border: none;
+    padding: 0;
+    margin-left: 20px;
+    opacity: 0.6;
+    font-style: italic;
+    position: relative;
+    margin-top: 6px;
+    margin-bottom: 6px;
+    .loose& {
+      margin-top: 20px;
+      margin-bottom: 20px;
+    }
+    &::before {
+      content: '|';
+      font-size: 0;
+      color: transparent;
+      display: inline-block;
+      width: 4px;
+      border-radius: 1px;
+      position: absolute;
+      margin-left: -16px;
+      top: 0;
+      bottom: 0;
+      background: hsla(230, 90%, 11%,.2);
+    }
+  }
+  hr {
+    height: 0;
+    border: none;
+    height: 1px;
+    background: hsla(230, 90%, 11%,.1);
+    margin: 10px 0;
+  }
+}

package/es/HTMLRenderer/main.scss

@@ -0,0 +1,233 @@
+.box {
+  font-size: 14px;
+  // color: hsla(230, 10%, 11%, 0.9);
+  word-break: break-word;
+  font-family: inherit;
+
+  &.loose {
+    font-size: 16px;
+    line-height: 1.85;
+  }
+
+  @media print {
+    color: #000 !important;
+    font-family: 'Times New Roman', Times, serif;
+  }
+
+  body.global-dark & {
+    filter: invert(1) hue-rotate(180deg);
+  }
+
+  img, video, iframe {
+    body.global-dark & {
+      filter: hue-rotate(180deg) invert(1);
+    }
+  }
+
+  img {
+    body.global-dark & {
+      background: #fff;
+    }
+    body.global-dark-dim & {
+      filter: hue-rotate(180deg) brightness(.75) invert(1);
+    }
+  }
+
+  body.global-dark & .symbolic > img {
+    filter: none;
+    background: none;
+  }
+
+  h1, h2, h3, h4, h5, h6, p, blockquote, table, .syntax-highlighter {
+    margin: 0;
+
+    &.loose {
+      margin: 20px 0;
+    }
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    font-weight: bold;
+  }
+
+  h1 {
+    font-size: 18px;
+    line-height: 1.8;
+
+    &.loose {
+      font-size: 28px;
+    }
+  }
+
+  h2 {
+    font-size: 16px;
+    line-height: 1.8;
+
+    &.loose {
+      font-size: 24px;
+    }
+  }
+
+  h3, h4, h5, h6 {
+    font-size: 14px;
+    line-height: 1.9;
+  }
+
+  h3 {
+    &.loose {
+      font-size: 18px;
+    }
+  }
+
+  h4, h5, h6 {
+    &.loose {
+      font-size: 16px;
+    }
+  }
+
+  img, video, .image {
+    max-width: 100% !important;
+    height: auto !important;
+
+    &:only-child {
+      display: block;
+      margin: 10px auto;
+    }
+  }
+
+  .image:only-child {
+    width: fit-content;
+  }
+
+  .image img {
+    margin: 0;
+  }
+
+  code {
+    margin: 0 .15em;
+    padding: .12em .25em;
+    border-radius: 3px;
+    font-size: 86%;
+    background: rgba(27, 31, 35, .05);
+  }
+
+  pre {
+    font-size: 14px;
+    line-height: 1.6;
+    border-radius: 4px;
+    border: 6px solid transparent;
+    overflow: auto;
+    margin: 0  0 8px 0;
+
+    code {
+      font-size: 14px;
+      padding: 0;
+      margin: 0;
+      border: none;
+      font-size: inherit;
+      background: none;
+      border-radius: 0;
+    }
+  }
+
+  table, td, th {
+    border: 1px solid #caccce;
+
+    body.global-dark & {
+      border-color: #babcbd;
+      // border-color: #c9cace;
+    }
+
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+
+  table {
+    line-height: 1.6;
+    margin: 10px auto;
+    border-spacing: none;
+    border-collapse: collapse;
+    empty-cells: show;
+    font-size: 14px;
+
+    &.loose p {
+      margin: 0;
+    }
+  }
+
+  td, th {
+    border: 1px solid #e3e3e3;
+    padding: 10px 12px;
+    line-height: 1.3;
+
+    p {
+      margin: 0;
+    }
+  }
+
+  th {
+    background: hsla(230, 90%, 11%, .03);
+  }
+
+  a, a:visited {
+    color: #0080FF;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  ul, ol {
+    list-style: revert;
+    padding-left: 16px;
+    margin: 0;
+
+    &.loose {
+      padding-left: 30px;
+    }
+  }
+
+  li {
+    list-style: revert;
+  }
+
+  blockquote {
+    opacity: 1;
+    border: none;
+    padding: 0;
+    margin-left: 20px;
+    opacity: 0.6;
+    font-style: italic;
+    position: relative;
+    margin-top: 6px;
+    margin-bottom: 6px;
+
+    &.loose {
+      margin-top: 20px;
+      margin-bottom: 20px;
+    }
+
+    &::before {
+      content: '|';
+      font-size: 0;
+      color: transparent;
+      display: inline-block;
+      width: 4px;
+      border-radius: 1px;
+      position: absolute;
+      margin-left: -16px;
+      top: 0;
+      bottom: 0;
+      background: hsla(230, 90%, 11%, .2);
+    }
+  }
+
+  hr {
+    height: 0;
+    border: none;
+    height: 1px;
+    background: hsla(230, 90%, 11%, .1);
+    margin: 10px 0;
+  }
+}

package/es/HTMLRenderer/style.d.ts

@@ -0,0 +1 @@
+import './main.scss';

package/es/HTMLRenderer/style.js

@@ -0,0 +1 @@
+import './main.scss';

package/es/HTMLRenderer/types.d.ts

@@ -0,0 +1,46 @@
+import type React from 'react';
+/**
+ * @api HTMLRenderer
+ */
+export interface HTMLRendererProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * 自定义类名
+     * @en Custom class name
+     */
+    className?: string;
+    /**
+     * 是否启用图片预览
+     * @en Enable image zoom
+     */
+    imagePreview?: boolean;
+    /**
+     * 是否使用松散模式
+     * @en Enable loose mode
+     */
+    loose?: boolean;
+    /**
+     * 要渲染的 HTML 字符串
+     * @en HTML string to render
+     */
+    children?: string;
+    /**
+     * 处理打开链接的函数
+     * @en Function to handle open link
+     */
+    handleOpenLink?: (href: string) => void;
+    /**
+     * 发送文本消息的函数
+     * @en Function to send text message
+     */
+    sendTextMessage?: (message: string) => void;
+    /**
+     * 复制文本的函数
+     * @en Function to copy text
+     */
+    copyText?: (text: string, i18n?: (key: string) => string) => void;
+    /**
+     * 国际化函数
+     * @en Internationalization function
+     */
+    i18n?: (key: string) => string;
+}

package/es/HTMLRenderer/types.js

@@ -0,0 +1 @@
+export {};

package/es/ImagePreview/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @component 图片预览
+ * @en ImagePreview
+ * @type 通用 - General
+ * @remarks 图片预览组件用于在钉钉环境中显示和预览图片。 - Image preview component used to display and preview images in DingTalk environment.
+ * @when 需要展示图片并提供预览功能时使用。 - Use when you need to display images and provide preview functionality.
+
+ */
+import React from 'react';
+import { ImagePreviewProps } from './types';
+export * from './types';
+declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<ImagePreviewProps & React.RefAttributes<HTMLElement>, "key" | keyof ImagePreviewProps> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, HTMLElement, {}>;
+export default _default;

package/es/ImagePreview/index.js

@@ -0,0 +1,72 @@
+/**
+ * @component 图片预览
+ * @en ImagePreview
+ * @type 通用 - General
+ * @remarks 图片预览组件用于在钉钉环境中显示和预览图片。 - Image preview component used to display and preview images in DingTalk environment.
+ * @when 需要展示图片并提供预览功能时使用。 - Use when you need to display images and provide preview functionality.
+
+ */
+import React, { forwardRef } from 'react';
+import classnames from 'classnames';
+import { PhotoProvider, PhotoView } from 'react-photo-view';
+import { findAncestor } from '../utils';
+import { ConfigProvider } from '@alifd/next';
+import { assignSubComponent } from '../utils';
+import { env as ddEnv, biz as ddBiz } from 'dingtalk-jsapi';
+function handleClick(e, src) {
+    if (findAncestor(e.target, t => t.tagName === 'A' && !!t.href)) {
+        e.stopPropagation();
+        return;
+    }
+    if (src && ddEnv.version) {
+        const a = document.createElement('a');
+        a.href = src;
+        e.stopPropagation();
+        ddBiz.util.previewImage({
+            urls: [a.href],
+            current: a.href,
+        });
+    }
+}
+function isInsideLink(e) {
+    return !!findAncestor(e.target, (t) => t.tagName === 'A' && !!t.href);
+}
+const ImagePreview = forwardRef(({ className, src, children, width, height }, ref) => {
+    let child;
+    try {
+        child = React.Children.only(children);
+    }
+    catch (e) { }
+    if (child && child.props) {
+        const { onClick, onTouchEnd } = child.props;
+        child = React.cloneElement(child, {
+            onTouchEnd: (e) => {
+                if (isInsideLink(e)) {
+                    e.stopPropagation();
+                }
+                handleClick(e, src);
+                onTouchEnd === null || onTouchEnd === void 0 ? void 0 : onTouchEnd(e);
+            },
+            onClick: (e) => {
+                if (isInsideLink(e)) {
+                    e.stopPropagation();
+                }
+                handleClick(e, src);
+                onClick === null || onClick === void 0 ? void 0 : onClick(e);
+            }
+        });
+    }
+    return (React.createElement(PhotoProvider, null,
+        React.createElement(PhotoView, { src: src },
+            React.createElement("span", { className: classnames('box', className, {
+                    'hasWidth': !!width,
+                    'hasHeight': !!height,
+                }), style: { width } },
+                width && height ? (React.createElement("span", { className: "placeholder", style: { paddingBottom: `${(height / width) * 100}%` } })) : null,
+                child))));
+});
+const ImagePreviewWithSub = assignSubComponent(ImagePreview, {
+    displayName: 'ImagePreview',
+});
+export * from './types';
+export default ConfigProvider.config(ImagePreviewWithSub);