{"version":3,"file":"static/js/7216.9678b855.chunk.js","mappings":"gOAkEA,QAxDA,SAAsBA,GAMlB,IANmB,QACnBC,EAAUA,SAAQ,MAClBC,EAAK,QACLC,EAAO,qBACPC,GAAuB,EAAK,uBAC5BC,GAAyB,GAC5BL,EACG,MAAMM,GAAaC,EAAAA,EAAAA,GAA2B,CAAEC,UAAWC,EAAAA,KACrDC,EAAoB,2BAAAC,OACNL,EAAU,YAExBM,GAASC,EAAAA,EAAAA,UACTC,GAASC,EAAAA,EAAAA,UAAQ,KACnB,IAAIC,EAAY,CAACC,IAAcC,GAM/B,OALIb,GACAW,EAAUG,KAAKC,GAEnBJ,EAAUG,KAAKE,GAyCvB,SAA0BC,GAAuB,IAAjBC,EAASC,UAAAC,OAAA,QAAAC,IAAAF,UAAA,GAAAA,UAAA,GAAG,GACpCG,EAASL,EAEb,OADAC,EAAUK,SAAQC,GAAOF,EAASE,EAAGP,KAC9BK,CACX,CA3CeG,CAAiB3B,EAASa,EAAU,GAC5C,CAACX,EAAwBF,IAa5B,OAXA4B,EAAAA,EAAAA,kBAAgB,KACZ,GAAInB,EAAOoB,QAAS,CACHpB,EAAOoB,QAAQC,iBAAiB,OACxCL,SAAQM,IACTA,EAAIC,OAAS,KACTD,EAAIE,UAAUC,OAAO,WAAW,CACnC,GAET,IACD,CAACvB,KAGAwB,EAAAA,EAAAA,KAAA,OAAKC,KAAKA,EAAAA,EAAAA,KAAI,iCAAkCrC,EAAK,IAAGD,QAASA,IAC7DqC,EAAAA,EAAAA,KAAA,OACIC,KAAKA,EAAAA,EAAAA,KACDC,EAAa,CACTpC,uBACAqC,sBAAuB/B,IACzB,IAENgC,wBAAyB,CAAE5B,UAC3B6B,IAAK/B,IAIrB,EAiBA,SAASM,IACL,OADkCM,UAAAC,OAAA,QAAAC,IAAAF,UAAA,GAAAA,UAAA,GAAG,IACtBoB,QAAQ,mCAAmCC,IAAkB,IAADC,EAAAC,EACvE,MAAMC,GAA0D,QAA9CF,EAACD,EAAcI,MAAM,iCAAyB,IAAAH,EAAAA,EAAI,IAAI,GAClEI,GAA0D,QAA9CH,EAACF,EAAcI,MAAM,iCAAyB,IAAAF,EAAAA,EAAI,IAAI,GAExE,GAAIC,GAAaE,EAAW,CACxB,MAAMC,EAASC,KAAKC,MAAML,EAAYE,GACtCL,EAAgBA,EAAcD,QAC1B,QAAQ,eAADjC,OACQqC,EAAS,cAAArC,OAAawC,EAAM,MAEnD,CAEA,OAAON,CAAa,GAE5B,CAEA,SAASzB,IACL,OADuCI,UAAAC,OAAA,QAAAC,IAAAF,UAAA,GAAAA,UAAA,GAAG,IAC3BoB,QAAQ,mCAAmC,CAACC,EAAeS,KACtE,MAAMC,GAAcC,EAAAA,EAAAA,GAA0BF,GAE9C,OAAIC,EAAY9B,OAAS,EACf,oDAANd,OAEU4C,EACGE,KACGC,IAAA,IAAC,OAAEC,EAAM,MAAEC,GAAOF,EAAA,yBAAA/C,OAAwBgD,EAAM,aAAAhD,OAAYiD,EAAK,WAEpEC,KAAK,MAAK,0BAAAlD,OACbkC,EAAa,8CAIhBA,CACX,GAER,CAEA,SAASxB,IACL,OAD6BG,UAAAC,OAAA,QAAAC,IAAAF,UAAA,GAAAA,UAAA,GAAG,IACjBoB,QAAQ,cAAc,IAC1B,8BAEf,CAEA,MAAMJ,EAAesB,IAAA,IAAC,qBAAE1D,EAAoB,sBAAEqC,GAAuBqB,EAAA,eAAAnD,OAC/DoD,EAAAA,GAAW,UAAApD,OACXqD,EAAAA,GAAY,UAAArD,OACZ8B,EAAqB,UAAA9B,OACrBP,GAAoB,cAAiB,oKAAAO,OAIGsD,EAAc,sCAItDA,EAAc,w7D","sources":["client/components/TextBoxClient.js"],"sourcesContent":["import React, { useMemo, useLayoutEffect, useRef } from 'react';\nimport sanitizeHtml from 'sanitize-html';\nimport PropTypes from 'prop-types';\nimport { css } from '@emotion/core';\nimport { froalaStyle, textBoxStyle } from 'fever-froala-editor/src/lib/cssFroala';\nimport { stylePropType } from 'utils/propTypes';\nimport generatePictureSourceData from 'client/utils/generatePictureSourceData';\nimport useGetFontFamilyByI18nLang from 'hooks/useGetFontFamilyByI18nLang';\nimport { IS_EDITOR_MODE } from 'config/envVariable';\n\nfunction TextBoxClient({\n    onClick = () => {},\n    style,\n    content,\n    ignoreContentPadding = false,\n    shouldUseCompressedImg = false\n}) {\n    const fontFamily = useGetFontFamilyByI18nLang({ isClient: !IS_EDITOR_MODE });\n    const fontFamilyBaseOnLang = `\n        font-family: \"${fontFamily}\";\n    `;\n    const divRef = useRef();\n    const __html = useMemo(() => {\n        let processes = [sanitizeHtml, setImageLazyloadStyle];\n        if (shouldUseCompressedImg) {\n            processes.push(replaceImageWithCompressed);\n        }\n        processes.push(replaceEmptyLink);\n\n        return processCallbacks(content, processes);\n    }, [shouldUseCompressedImg, content]);\n\n    useLayoutEffect(() => {\n        if (divRef.current) {\n            const imgs = divRef.current.querySelectorAll('img');\n            imgs.forEach(img => {\n                img.onload = () => {\n                    img.classList.remove('lazyload');\n                };\n            });\n        }\n    }, [__html]);\n\n    return (\n        <div css={css('overflow: hidden; width: 100%;', style)} onClick={onClick}>\n            <div\n                css={css(\n                    displayStyle({\n                        ignoreContentPadding,\n                        customFontFamilyStyle: fontFamilyBaseOnLang\n                    })\n                )}\n                dangerouslySetInnerHTML={{ __html }}\n                ref={divRef}\n            />\n        </div>\n    );\n}\n\nTextBoxClient.propTypes = {\n    style: stylePropType,\n    onClick: PropTypes.func,\n    content: PropTypes.string,\n    ignoreContentPadding: PropTypes.bool\n};\n\nexport default TextBoxClient;\n\nfunction processCallbacks(item, callbacks = []) {\n    let result = item;\n    callbacks.forEach(cb => (result = cb(item)));\n    return result;\n}\n\nfunction setImageLazyloadStyle(content = '') {\n    return content.replace(/<img.+?src=\"([^\"]+)\"[^>]*\\/?>/gi, imgElementStr => {\n        const dataWidth = (imgElementStr.match(/data-width=\"([\\d.]+?)\"/) ?? [])[1];\n        const dataRatio = (imgElementStr.match(/data-ratio=\"([\\d.]+?)\"/) ?? [])[1];\n\n        if (dataWidth && dataRatio) {\n            const height = Math.round(dataWidth * dataRatio);\n            imgElementStr = imgElementStr.replace(\n                /<img /,\n                `<img width=\"${dataWidth}\" height=\"${height}\" `\n            );\n        }\n\n        return imgElementStr;\n    });\n}\n\nfunction replaceImageWithCompressed(content = '') {\n    return content.replace(/<img.+?src=\"([^\"]+)\"[^>]*\\/?>/gi, (imgElementStr, src) => {\n        const sourceDatas = generatePictureSourceData(src);\n\n        if (sourceDatas.length > 0) {\n            return `\n                <picture>\n                    ${sourceDatas\n                        .map(\n                            ({ srcSet, media }) => `<source srcset=\"${srcSet}\" media=\"${media}\" />`\n                        )\n                        .join('\\n')}\n                    ${imgElementStr}\n                </picture>\n            `;\n        } else {\n            return imgElementStr;\n        }\n    });\n}\n\nfunction replaceEmptyLink(content = '') {\n    return content.replace(/href=\"#\"/gi, () => {\n        return 'href=\"javascript:void(0);\"';\n    });\n}\n\nconst displayStyle = ({ ignoreContentPadding, customFontFamilyStyle }) => `\n    ${froalaStyle}\n    ${textBoxStyle}\n    ${customFontFamilyStyle}\n    ${ignoreContentPadding && `padding: 0;`}\n    & a { text-decoration: none; }\n    & iframe { max-width: 100%; vertical-align: top; }\n    & img.lazyload {\n        background: rgb(205, 205, 205) url('${placeholderImg}') no-repeat center;\n    }\n    `;\n\nconst placeholderImg = `data:image/svg+xml;base64,PCEtLSBCeSBTYW0gSGVyYmVydCAoQHNoZXJiKSwgZm9yIGV2ZXJ5b25lLiBNb3JlIEAgaHR0cDovL2dvby5nbC83QUp6YkwgLS0+Cjxzdmcgd2lkdGg9IjQ0IiBoZWlnaHQ9IjQ0IiB2aWV3Qm94PSIwIDAgNDQgNDQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjZmZmIj4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLXdpZHRoPSIyIj4KICAgICAgICA8Y2lyY2xlIGN4PSIyMiIgY3k9IjIyIiByPSIxIj4KICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIKICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIxLjhzIgogICAgICAgICAgICAgICAgdmFsdWVzPSIxOyAyMCIKICAgICAgICAgICAgICAgIGNhbGNNb2RlPSJzcGxpbmUiCiAgICAgICAgICAgICAgICBrZXlUaW1lcz0iMDsgMSIKICAgICAgICAgICAgICAgIGtleVNwbGluZXM9IjAuMTY1LCAwLjg0LCAwLjQ0LCAxIgogICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InN0cm9rZS1vcGFjaXR5IgogICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjEuOHMiCiAgICAgICAgICAgICAgICB2YWx1ZXM9IjE7IDAiCiAgICAgICAgICAgICAgICBjYWxjTW9kZT0ic3BsaW5lIgogICAgICAgICAgICAgICAga2V5VGltZXM9IjA7IDEiCiAgICAgICAgICAgICAgICBrZXlTcGxpbmVzPSIwLjMsIDAuNjEsIDAuMzU1LCAxIgogICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICAgICAgPC9jaXJjbGU+CiAgICAgICAgPGNpcmNsZSBjeD0iMjIiIGN5PSIyMiIgcj0iMSI+CiAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InIiCiAgICAgICAgICAgICAgICBiZWdpbj0iLTAuOXMiIGR1cj0iMS44cyIKICAgICAgICAgICAgICAgIHZhbHVlcz0iMTsgMjAiCiAgICAgICAgICAgICAgICBjYWxjTW9kZT0ic3BsaW5lIgogICAgICAgICAgICAgICAga2V5VGltZXM9IjA7IDEiCiAgICAgICAgICAgICAgICBrZXlTcGxpbmVzPSIwLjE2NSwgMC44NCwgMC40NCwgMSIKICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utb3BhY2l0eSIKICAgICAgICAgICAgICAgIGJlZ2luPSItMC45cyIgZHVyPSIxLjhzIgogICAgICAgICAgICAgICAgdmFsdWVzPSIxOyAwIgogICAgICAgICAgICAgICAgY2FsY01vZGU9InNwbGluZSIKICAgICAgICAgICAgICAgIGtleVRpbWVzPSIwOyAxIgogICAgICAgICAgICAgICAga2V5U3BsaW5lcz0iMC4zLCAwLjYxLCAwLjM1NSwgMSIKICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogICAgICAgIDwvY2lyY2xlPgogICAgPC9nPgo8L3N2Zz4=`;\n"],"names":["_ref","onClick","style","content","ignoreContentPadding","shouldUseCompressedImg","fontFamily","useGetFontFamilyByI18nLang","isClient","IS_EDITOR_MODE","fontFamilyBaseOnLang","concat","divRef","useRef","__html","useMemo","processes","sanitizeHtml","setImageLazyloadStyle","push","replaceImageWithCompressed","replaceEmptyLink","item","callbacks","arguments","length","undefined","result","forEach","cb","processCallbacks","useLayoutEffect","current","querySelectorAll","img","onload","classList","remove","___EmotionJSX","css","displayStyle","customFontFamilyStyle","dangerouslySetInnerHTML","ref","replace","imgElementStr","_imgElementStr$match","_imgElementStr$match2","dataWidth","match","dataRatio","height","Math","round","src","sourceDatas","generatePictureSourceData","map","_ref2","srcSet","media","join","_ref3","froalaStyle","textBoxStyle","placeholderImg"],"sourceRoot":""}