| 1 | import { ComponentType } from 'react'
|
| 2 | import { StandardProps } from './common'
|
| 3 |
|
| 4 | interface RichTextProps extends StandardProps {
|
| 5 | /** 文本是否可选，该属性会使节点显示为 block
|
| 6 | * @default false
|
| 7 | * @supported weapp
|
| 8 | */
|
| 9 | userSelect?: boolean
|
| 10 | /** 节点列表/ HTML String */
|
| 11 | nodes?: Nodes
|
| 12 | /** 显示连续空格
|
| 13 | * @supported weapp, rn
|
| 14 | */
|
| 15 | space?: keyof RichTextProps.TSpace
|
| 16 | }
|
| 17 |
|
| 18 | /** 节点类型
|
| 19 | * > 现支持两种节点，通过type来区分，分别是元素节点和文本节点，默认是元素节点，在富文本区域里显示的HTML节点 元素节点：type = node*
|
| 20 | */
|
| 21 | type Nodes = Array<RichTextProps.Text | RichTextProps.HTMLElement> | string
|
| 22 |
|
| 23 | declare namespace RichTextProps {
|
| 24 | /** space 的合法值 */
|
| 25 | interface TSpace {
|
| 26 | /** 中文字符空格一半大小 */
|
| 27 | ensp
|
| 28 | /** 中文字符空格大小 */
|
| 29 | emsp
|
| 30 | /** 根据字体设置的空格大小 */
|
| 31 | nbsp
|
| 32 | }
|
| 33 |
|
| 34 | /** 文本节点 */
|
| 35 | interface Text {
|
| 36 | /** 文本类型 */
|
| 37 | type: 'text'
|
| 38 |
|
| 39 | /** 文本字符串
|
| 40 | * @remarks 支持 entities
|
| 41 | * @default ""
|
| 42 | */
|
| 43 | text: string
|
| 44 | }
|
| 45 |
|
| 46 | /** 元素节点，默认为元素节点
|
| 47 | * 全局支持class和style属性，不支持 id 属性。
|
| 48 | */
|
| 49 | interface HTMLElement {
|
| 50 | /** HTML 类型 */
|
| 51 | type?: 'node'
|
| 52 |
|
| 53 | /** 标签名
|
| 54 | * @remarks 支持部分受信任的 HTML 节点
|
| 55 | */
|
| 56 | name: string
|
| 57 |
|
| 58 | /** 属性
|
| 59 | * @remarks 支持部分受信任的属性，遵循 Pascal 命名法
|
| 60 | */
|
| 61 | attrs?: Object
|
| 62 |
|
| 63 | /** 子节点列表
|
| 64 | * @remarks 结构和 nodes 一致
|
| 65 | */
|
| 66 | children?: Nodes
|
| 67 | }
|
| 68 | }
|
| 69 |
|
| 70 | /** 富文本
|
| 71 | * @classification base
|
| 72 | * @supported weapp, swan, alipay, tt, h5, rn
|
| 73 | * @example_react
|
| 74 | * ```tsx
|
| 75 | * class App extends Components {
|
| 76 | * state = {
|
| 77 | * nodes: [{
|
| 78 | * name: 'div',
|
| 79 | * attrs: {
|
| 80 | * class: 'div_class',
|
| 81 | * style: 'line-height: 60px; color: red;'
|
| 82 | * },
|
| 83 | * children: [{
|
| 84 | * type: 'text',
|
| 85 | * text: 'Hello World!'
|
| 86 | * }]
|
| 87 | * }]
|
| 88 | * }
|
| 89 | * render () {
|
| 90 | * return (
|
| 91 | * <RichText nodes={this.state.nodes} />
|
| 92 | * )
|
| 93 | * }
|
| 94 | * }
|
| 95 | * ```
|
| 96 | * @example_vue
|
| 97 | * ```html
|
| 98 | * <template>
|
| 99 | * <view class="components-page">
|
| 100 | * <rich-text :nodes="nodes"></rich-text>
|
| 101 | * </view>
|
| 102 | * </template>
|
| 103 | *
|
| 104 | * <script>
|
| 105 | * export default {
|
| 106 | * name: 'Index',
|
| 107 | * data() {
|
| 108 | * return {
|
| 109 | * nodes: [{
|
| 110 | * name: 'div',
|
| 111 | * attrs: {
|
| 112 | * class: 'div_class',
|
| 113 | * style: 'line-height: 60px; color: red;'
|
| 114 | * },
|
| 115 | * children: [{
|
| 116 | * type: 'text',
|
| 117 | * text: 'Hello World!'
|
| 118 | * }]
|
| 119 | * }]
|
| 120 | * }
|
| 121 | * },
|
| 122 | * onReady () {
|
| 123 | * console.log('onReady')
|
| 124 | * }
|
| 125 | * }
|
| 126 | * </script>
|
| 127 | * ```
|
| 128 | * @see https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html
|
| 129 | */
|
| 130 | declare const RichText: ComponentType<RichTextProps>
|
| 131 |
|
| 132 | export { RichText, RichTextProps }
|