qc-EnterpriseWeChat-Pro/src/components/MaterialModal/qwTextModal.tsx

import { Button, Input, App, Modal, Popover, Radio, Space } from 'antd'
import React, { useCallback, useEffect, useRef, useState } from 'react'
import Expression from '@/components/Expression'
import styles from './text.less'
import sanitizeHtml from 'sanitize-html';
import { RadioChangeEvent } from 'antd/lib/radio';
type Props = {
    visible: boolean,
    onCancel: () => void,
    onOK: (props: any, type?: number) => void
    defaultData?: any,
    hdLink?: boolean,
    fansName?: boolean,
}
const sanitizeConf: sanitizeHtml.IOptions = {
    allowedTags: ['br', 'a'],
    allowedAttributes: { a: ["href", "_href", "data-miniprogram-appid", "data-miniprogram-path"] },
    allowedSchemes: ['http', 'https', 'weixin']
};
/**文本弹窗 */
const WxTextModal = React.memo((props: Props) => {
    const { message } = App.useApp()
    const { visible, onCancel, onOK, fansName = true, hdLink = true } = props
    const [value, setValue] = useState<string>('')//存放连接文字
    const [content, setContent] = useState<string>('')//存放发送文字
    const [isShow, setIsShow] = useState<boolean>(false)//互动弹窗
    const [range, setRange] = useState<Range>()//丢失焦点存放焦点位置
    const [ref, setRef] = useState<any>(null)//存放编辑框的实例
    const [aLink, setAlink] = useState<string>('')//存放页面链接
    const [appID, setAppID] = useState<string>('')//存放小程序APPID
    const [path, setPath] = useState<string>('')//存放小程序路径
    const [userId, setUserId] = useState<any>(2)//小程序路径插入userID
    const [textData, setTextData] = useState<any>({ range: null, left: -100, top: -100, text: '' })
    const [isLink, setIsLink] = useState<boolean>(false)
    const [isWxLink, setIsWxLink] = useState<boolean>(false)
    const [isHtml, setIsHtml] = useState<boolean>(false)
    const text = useRef('');
    const [phoneType, setPhoneType] = useState<1 | 2 | 3 | 4>(3)
    /**
     * 发送处理
     */
    const callback = useCallback(() => {
        if (ref.innerHTML) {
            console.log(ref.innerHTML)
            let textContent: any = sanitizeHtml(ref.innerHTML, sanitizeConf);
            console.log('textContent====>', textContent)
            textContent = textContent.replace(/&quot;/ig, '"')
                .replace(/&amp;/ig, '&')
                .replace(/&lt;/ig, '<')
                .replace(/&gt;/ig, '>')
                .replace(/<\s+/g, '<')
                // .replace(/[\f\n\r\t\v]/g, '<br/>')//将回车变成br
                .replace(/\&nbsp;(<br>)?/g, '')
                .replace(/<[/]?myspan[^>]*>/ig, '#')
                .replace(/#<br>/g, '#')
                .replace(/<([a-z]+?)(?:\s+?[^>]*?)?>[\s(<br>)]*?<\/\1>/ig, '<br/>')//替换所有空标签或空标签带<br>的标签为<br>
                .replace(/(\b<div>(<br>)?)|((<br>)?<div>)/ig, '<br/>')//<div>or<br><div>or<div><br>转br
                .replace(/<\/div>/ig, '')//</div>转‘’
                .replace(/_href="\s+/ig, '_href="')//清除href头部空格
                .replace(/href=weixin/ig, 'href="weixin')
                .replace(/msgmenuid="/ig, 'msgmenuid= "')
                .replace(/"=""/ig, '')
                // .replace(/\s+"/ig, '"')//清除href尾部空格
                .split('<br/>')
            onOK({
                textContent: textContent, indexId: props.defaultData?.indexId //textContent.filter((str)=> str!=='') 注释保留空格和换行
            }, 4)
        } else {
            alert('元素获取失败请复制内容刷新页面')
            message.error('请输入文字')
        }
        handleClose()
    }, [ref])
    /**
     * 互动连接文字
     */
    const textChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
        let v = e.target.value
        setValue(v)
    }, [])
    /**
     * 互动发送文本
     */
    const contentChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
        let v = e.target.value
        setContent(v)
    }, [])
    /**
    * 网页小程序连接地址
    */
    const aLinkChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
        let v = e.target.value
        setAlink(v)
    }, [])
    /**
    * 小程序路径
    */
    const pathChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
        let v = e.target.value
        setPath(v)
    }, [])
    /**
    * 小程序ID
    */
    const appIDChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
        let v = e.target.value
        setAppID(v)
    }, [])
    /**
     * 插入表情
     */
    const getStr = useCallback((str: string, range: Range) => {
        if (range) {
            let selection = window.getSelection()
            selection?.empty()//清空选择range
            selection?.addRange(range)//插入新的range
            document.execCommand('insertHtml', false, str + '&nbsp;');
        }
    }, [])
    /**
     * 光标丢失记录位置
     */
    const onBlur = useCallback(() => {
        try {
            let selection = window.getSelection()
            let range = selection?.getRangeAt(0)
            setRange(range)
        } catch (err) {
        }
    }, [text])
    /**
     * 插入粉丝昵称
     */
    const pushName = useCallback(() => {
        let selection = window.getSelection()
        selection?.empty()//清空选择range
        selection?.addRange(range as Range)//插入新的range
        document.execCommand('insertHtml', false, `#粉丝昵称#`);
        selection?.collapseToEnd()//光标插入到末尾
    }, [range])
    /**
     * 插入互动链
     */
    const pushLink = useCallback(() => {
        if (!value || !content) {
            setIsShow(false)
            return
        }
        let selection = window.getSelection()
        selection?.empty()//清空选择range
        selection?.addRange(range as Range)//插入新的range
        if (phoneType === 4) {
            document.execCommand('insertHtml', false, `<a href="a href=weixin://bizmsgmenu?msgmenucontent=${content}&msgmenuid=+++">${value}</a>`);
        } else {
            document.execCommand('insertHtml', false, `<a href='weixin://${phoneType === 1 ? 'kefumenu' : 'bizmsgmenu'}?${phoneType === 1 ? `kefumenucontent=${content}` : `msgmenucontent=${content}`}&${phoneType === 1 ? 'kefumenuid=0' : phoneType === 2 ? `msgmenuid= ` : 'msgmenuid=0'}' >${value}</a>`);
        }
        selection?.collapseToEnd()//光标插入到末尾
        setValue('')
        setContent('')
        setIsShow(false)
    }, [range, value, content, phoneType])
    /**
     * 初始光标选中
     */
    useEffect(() => {
        console.log('ref')
        if (ref) {
            ref?.focus()
        }
    }, [ref])
    //复制只取纯文本
    function textPaste(event: any) {
        event.preventDefault();
        let text;
        let clp = (event.originalEvent || event).clipboardData;
        // 兼容chorme或hotfire
        text = (clp.getData('text/plain') || clp.getData('text'))
            .replace(/&quot;/ig, '"')
            .replace(/&amp;/ig, '&')
            .replace(/&lt;/ig, '<')
            .replace(/&gt;/ig, '>')
            .replace(/<\s+/g, '<')
            .replace(/href="weixin/ig, 'href=weixin')
        text = sanitizeHtml(text, sanitizeConf) || "";
        if (text !== "") {
            document.execCommand('insertHtml', false, text);
        }
    }
    /**
     * 编辑默认内容写入
     */
    useEffect(() => {
        console.log('编辑默认内容写入', props?.defaultData?.textContent)
        if (props?.defaultData?.textContent && ref) {
            let text = '';
            if (Array.isArray(props?.defaultData?.textContent)) {
                props?.defaultData?.textContent?.map((key: any, index: number) => {
                    key = key.replace(/href="weixin/ig, 'href=weixin')
                    if (key.indexOf('&lt;') !== -1) {//假如存在就是原文
                        setIsHtml(true)
                    }
                    text += index !== props?.defaultData?.textContent?.length - 1 ? `${key}<br/>` : key
                })
            } else {
                text = `${props?.defaultData?.textContent}`
            }
            document.execCommand('insertHtml', true, text);
        }
    }, [ref])
    /**切换文本原文 */
    const onHtml = useCallback(() => {
        let str: string = ref.innerHTML
        str = str.replace(/&quot;/ig, '"').replace(/&amp;/ig, '&').replace(/&lt;/ig, '<').replace(/&gt;/ig, '>').replace(/<\s+/g, '<').replace(/""/ig, '"').replace(/"="/ig, '')
        if (isHtml) {
            console.log('str1', str)
            setIsHtml(false)
            ref.innerHTML = ''
            ref.innerHTML = str

        } else {
            console.log('str2', str)
            setIsHtml(true)
            ref.innerHTML = ''
            ref.innerText = str.replace(/<br[\/]?>/ig, '\n').replace(/&nbsp;/ig, ' ')
        }
    }, [ref, text, isHtml])
    //文本选中
    let handleSelectText = useCallback((event: React.SyntheticEvent<HTMLPreElement, Event>) => {
        let selection = window.getSelection ? window.getSelection() : (document.getSelection ? document.getSelection() : ((document as any)?.selection ? (document as any)?.selection.createRange().text : ""))
        let text = selection.toString() || selection.text
        if (text) {//存在文本弹窗
            let range = selection?.getRangeAt(0)
            let { top, left } = range?.getBoundingClientRect()
            setTextData({ range, top, left, text })
        } else {
            handleClose()//关闭弹窗
        }
    }, [])
    //点击设置连接转换输入，清空连接处理
    let handleLink = useCallback((type: number) => {
        console.log('点击设置连接转换输入，清空连接处理')
        switch (type) {
            case 1:
                setIsLink(true)
                break;
            case 2:
                setIsWxLink(true)
                break;
            default:
                let selection = window.getSelection()
                selection?.empty()//清空选择range
                selection?.addRange(textData?.range)//插入新的range
                document.execCommand('unlink')//清除连接
                selection?.collapseToEnd()//光标插入到末尾
                handleClose()//关闭弹窗
                break
        }
    }, [textData])
    //清空数据并关闭弹窗
    let handleClose = useCallback(() => {
        console.log('清空数据并关闭弹窗')
        setTextData({ range: null, left: -100, top: -100, text: '' })
        setIsWxLink(false)
        setIsLink(false)
        setAppID('')
        setAlink('')
        setPath('')
    }, [])
    //ok插入连接数据
    let handleOk = useCallback(() => {
        let selection = window.getSelection()
        selection?.empty()//清空选择range
        selection?.addRange(textData?.range)//插入新的range
        if (isWxLink) {
            if (aLink && appID && path) {
                let Apath = path
                if (userId) {
                    if (userId === 1 && path && !path.includes('#USER_ID#')) {
                        Apath = Apath + '#USER_ID#'
                    } else if (userId === 2 && path && !path.includes('#QC_USER_ID#')) {
                        Apath = Apath + '#QC_USER_ID#'
                    }
                }
                document.execCommand('insertHTML', true, `<a href='${aLink}' data-miniprogram-appid='${appID}' data-miniprogram-path='${Apath}' >${textData?.text}</a>`);//插入连接
                selection?.collapseToEnd()
                handleClose()
            } else {
                message.error('请填写完整')
            }
        } else {
            if (aLink && aLink.search(/http[s]?:\/\//ig) !== -1) {//
                document.execCommand('createLink', false, aLink);//插入连接
                selection?.collapseToEnd()
                handleClose()
            } else {
                message.error('请填入正确的连接')
            }
        }
    }, [textData, aLink, appID, path, isWxLink, range, userId])
    //处理选中的文本
    return <Modal
        title='编辑文字内容'
        open={visible}
        width={1100}
        onCancel={() => {
            handleClose()
            text.current = ''
            onCancel()
        }}
        onOk={callback}
        destroyOnClose
    >
        <div className={styles.box}>
            <div className={styles.header}>
                <Space>
                    <Expression getStr={getStr} range={range as Range} />
                    {
                        // fansName && <Button size='small' onClick={pushName}>粉丝昵称</Button>
                    }
                    {
                        hdLink && <Popover
                            placement="right"
                            title={'新建互动链'}
                            visible={isShow}
                            onVisibleChange={(visible) => { setIsShow(visible) }}
                            content={<div className={styles.popover}>
                                <div>
                                    <label>连接文字：</label>
                                    <Input.TextArea rows={2} placeholder='互动链显示的文字' onChange={textChange} value={value} />
                                </div>
                                <div>
                                    <label>点击发送：</label>
                                    <Input placeholder='粉丝点击互动链后，自动向公众号发送的消息' onChange={contentChange} value={content} />
                                </div>
                                <div>
                                    <label>系&nbsp;&nbsp;统：</label>
                                    <Radio.Group
                                        onChange={(e: RadioChangeEvent) => {
                                            setPhoneType(e.target.value)
                                        }}
                                        value={phoneType}
                                    >
                                        <Radio value={3}>安卓</Radio>
                                        {/* <Radio value={1}>安卓1</Radio>
                                        <Radio value={4}>安卓2</Radio>
                                        <Radio value={2}>苹果</Radio> */}

                                    </Radio.Group>
                                </div>
                                <div>
                                    <label>提&nbsp;&nbsp;示：</label>
                                    {
                                        phoneType === 1 ?
                                            <strong style={{ color: 'red' }}>
                                                8.0.9——8.0.11（最新版本），共3个版本均可激活48小时互动！<br />
                                                8.0.7及以下版本，点击新蓝链会跳转空页面，无法激活!<br />
                                                iOS用户点击新蓝链，系统无法模拟用户回复消息！！！
                                            </strong>
                                            :
                                            phoneType === 3 ?
                                                <strong>
                                                    原来的篮字方式无法激活48小时互动但所有机型通用
                                                </strong>
                                                : phoneType === 4 ? <strong>
                                                    安卓用户可以看到，ios看不到
                                                </strong> : <strong>
                                                    只对IOS有效
                                                </strong>
                                    }
                                </div>
                                <Button onClick={pushLink} type='primary'>确定</Button>
                            </div>}
                            trigger="click"
                        >
                            <Button size='small' >互动链</Button>
                        </Popover>
                    }
                    <Button size='small' onClick={onHtml}>文本转译</Button>
                </Space>
            </div>
            <pre
                className={styles.editable} //样式
                onBlur={onBlur}//焦点丢失
                contentEditable="true"
                dangerouslySetInnerHTML={{ __html: text.current }}
                onSelect={handleSelectText}//选中事件
                ref={(ref: any) => { setRef(ref) }}
                onKeyDown={(e: React.KeyboardEvent<HTMLPreElement>) => {
                    if (e.key === 'Enter') {
                        document.execCommand('insertHTML', false, '\n')
                        e.preventDefault()
                    }
                }}
                onKeyUp={(e: React.KeyboardEvent<HTMLPreElement>) => {
                    if (e.key === 'Enter') {
                        e.preventDefault()
                    }
                }}
                onPaste={textPaste}
            />
        </div>
        <div
            className={styles.fixed_pop}
            style={{ left: textData?.left, top: textData?.top + 30, display: textData.left > 0 ? 'flex' : '' }}
        >
            <>
                {isLink && <div className={styles.fixed_pop_link}>
                    <Input placeholder='输入链接，以http://或https://开头' onChange={aLinkChange} />
                    <a onClick={handleOk}>✓</a>
                    <a onClick={handleClose}>×</a>
                </div>}
                {
                    isWxLink && <div className={styles.fixed_pop_wx}>
                        <span>
                            <Input placeholder='填写小程序AppID，跳转小程序需与当前公众号绑定关联关系' onChange={appIDChange} />
                            <Input placeholder='填写小程序路径，例如：pages/index' onChange={pathChange} />
                            <Input placeholder='备用网页，以http://或https://开头' onChange={aLinkChange} />
                            <div className={styles.fixed_pop_wx_radio}>
                                <span>路径插入用户：</span>
                                <Radio.Group onChange={(e: any) => { setUserId(Number(e.target.value)) }} value={userId} >
                                    <Radio value={1}>普通用户</Radio>
                                    <Radio value={2}>趣程用户</Radio>
                                    <Radio value={0}>否</Radio>
                                </Radio.Group>
                            </div>
                        </span>
                        <span>
                            <a onClick={handleOk}>✓</a>
                            <a onClick={handleClose}>×</a>
                        </span>
                    </div>

                }
                {!isLink && !isWxLink && <>
                    <span onClick={() => { handleLink(1) }}>设置连接</span>
                    <span onClick={() => { handleLink(2) }}>设置小程序</span>
                    <span onClick={() => { handleLink(3) }}>清空连接</span>
                </>
                }
            </>
        </div>
    </Modal >
})
export default WxTextModal