@dialpad/dialtone/dist/vue3/lib/emoji-text-wrapper/emoji-text-wrapper.cjs.map

Dialpad's Dialtone design system monorepo

{"version":3,"file":"emoji-text-wrapper.cjs","sources":["../../../components/emoji_text_wrapper/emoji_text_wrapper.vue"],"sourcesContent":["<script>\nimport { DtEmoji } from '../emoji';\nimport { findEmojis, findShortCodes } from '@/common/emoji';\nimport { h, resolveDynamicComponent } from 'vue';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants';\n\nconst COMMENT_TYPE = h(resolveDynamicComponent(null)).type;\n\n/**\n * Wrapper to find and replace shortcodes like :smile: or unicode chars such as 😄 with our custom Emojis implementation.\n * @see https://dialtone.dialpad.com/components/emoji_text_wrapper.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtEmojiTextWrapper',\n\n  components: {\n    DtEmoji,\n  },\n\n  props: {\n    /**\n     * Element type (tag name) to use for the wrapper.\n     */\n    elementType: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The icon size to render the emojis at: 100 to 800\n     */\n    size: {\n      type: String,\n      default: '500',\n      validator: (t) => Object.keys(ICON_SIZE_MODIFIERS).includes(t),\n    },\n  },\n\n  data () {\n    return {\n      loadingEmojiJson: true,\n    };\n  },\n\n  async created () {\n    this.loadingEmojiJson = false;\n  },\n\n  methods: {\n    /**\n     * Replaces the valid codes from the text content with a DtEmoji component.\n     * @returns {Array<VNode|string>}\n     */\n    replaceDtEmojis (replaceList, textContent) {\n      if (!replaceList.length) return textContent;\n      // Escape the asterisk to avoid breaking the regex for the asterisk emoji\n      const escapedReplaceList = replaceList.map(item =>\n        item.replace(/\\*/g, '\\\\*'),\n      );\n\n      const regexp = new RegExp(`(${escapedReplaceList.join('|')})`, 'g');\n      const items = textContent.split(regexp);\n\n      return items\n        .filter(item => item.trim() !== '')\n        .map((item) => {\n          if (replaceList.includes(item)) {\n            return h(DtEmoji, { code: item, size: this.size });\n          }\n          return h('span', { class: 'd-emoji-text-wrapper__text' }, item);\n        });\n    },\n\n    /**\n     * Recursively search the Vue virtual DOM to find text\n     * @param VNode\n     * @returns {VNode|*}\n     */\n    searchVNodes (VNode) {\n      if (typeof VNode === 'string') return this.searchCodes(VNode);\n      if (VNode.type === COMMENT_TYPE) return VNode;\n      if (typeof VNode.type === 'symbol') return this.searchCodes(VNode.children);\n      if (VNode.props?.innerHTML) return this.searchVNodes(VNode.props.innerHTML);\n\n      const children = Array.isArray(VNode.children) ? VNode.children : [VNode.children];\n      return h(VNode.type, VNode.props, children.map(VNodeChild => this.searchVNodes(VNodeChild)));\n    },\n\n    // TODO: Find a way to crawl vue components\n    replaceVueComponentVNodeContent () {\n      //\n    },\n\n    /**\n     * Find codes in text.\n     * @param textContent string\n     * @returns {Array<VNode|string>|string}\n     */\n    searchCodes (textContent) {\n      const shortcodes = findShortCodes(textContent);\n      const emojis = findEmojis(textContent);\n\n      const replaceList = [...shortcodes, ...emojis];\n      if (replaceList.length === 0) return textContent;\n      return this.replaceDtEmojis(replaceList, textContent);\n    },\n  },\n\n  render () {\n    const defaultSlotContent = this.$slots.default ? this.$slots.default() : [];\n    return h(\n      this.elementType,\n      {\n        'data-qa': 'emoji-text-wrapper',\n        class: 'd-emoji-text-wrapper',\n      },\n      this.loadingEmojiJson\n        ? defaultSlotContent\n        : defaultSlotContent.map(VNode => this.searchVNodes(VNode)),\n    );\n  },\n};\n</script>\n"],"names":["COMMENT_TYPE","h","resolveDynamicComponent","_sfc_main","DtEmoji","t","ICON_SIZE_MODIFIERS","replaceList","textContent","escapedReplaceList","item","regexp","VNode","_a","children","VNodeChild","shortcodes","findShortCodes","emojis","findEmojis","defaultSlotContent"],"mappings":"qPAMMA,EAAeC,EAAAA,EAAEC,EAAAA,wBAAwB,IAAI,CAAC,EAAE,KAMjDC,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,qBAEN,WAAY,CACV,QAAAC,EAAAA,SAGF,MAAO,CAIL,YAAa,CACX,KAAM,OACN,QAAS,OAMX,KAAM,CACJ,KAAM,OACN,QAAS,MACT,UAAYC,GAAM,OAAO,KAAKC,qBAAmB,EAAE,SAASD,CAAC,IAIjE,MAAQ,CACN,MAAO,CACL,iBAAkB,GAEtB,EAEA,MAAM,SAAW,CACf,KAAK,iBAAmB,EAC1B,EAEA,QAAS,CAKP,gBAAiBE,EAAaC,EAAa,CACzC,GAAI,CAACD,EAAY,OAAQ,OAAOC,EAEhC,MAAMC,EAAqBF,EAAY,IAAIG,GACzCA,EAAK,QAAQ,MAAO,KAAK,GAGrBC,EAAS,IAAI,OAAO,IAAIF,EAAmB,KAAK,GAAG,CAAC,IAAK,GAAG,EAGlE,OAFcD,EAAY,MAAMG,CAAM,EAGnC,OAAOD,GAAQA,EAAK,KAAI,IAAO,EAAE,EACjC,IAAKA,GACAH,EAAY,SAASG,CAAI,EACpBT,EAAAA,EAAEG,EAAAA,QAAS,CAAE,KAAMM,EAAM,KAAM,KAAK,KAAM,EAE5CT,EAAAA,EAAE,OAAQ,CAAE,MAAO,4BAA2B,EAAKS,CAAI,CAC/D,CACL,EAOA,aAAcE,EAAO,OACnB,GAAI,OAAOA,GAAU,SAAU,OAAO,KAAK,YAAYA,CAAK,EAC5D,GAAIA,EAAM,OAASZ,EAAc,OAAOY,EACxC,GAAI,OAAOA,EAAM,MAAS,SAAU,OAAO,KAAK,YAAYA,EAAM,QAAQ,EAC1E,IAAIC,EAAAD,EAAM,QAAN,MAAAC,EAAa,UAAW,OAAO,KAAK,aAAaD,EAAM,MAAM,SAAS,EAE1E,MAAME,EAAW,MAAM,QAAQF,EAAM,QAAQ,EAAIA,EAAM,SAAW,CAACA,EAAM,QAAQ,EACjF,OAAOX,EAAAA,EAAEW,EAAM,KAAMA,EAAM,MAAOE,EAAS,IAAIC,GAAc,KAAK,aAAaA,CAAU,CAAC,CAAC,CAC7F,EAGA,iCAAmC,CAEnC,EAOA,YAAaP,EAAa,CACxB,MAAMQ,EAAaC,EAAAA,eAAeT,CAAW,EACvCU,EAASC,EAAAA,WAAWX,CAAW,EAE/BD,EAAc,CAAC,GAAGS,EAAY,GAAGE,CAAM,EAC7C,OAAIX,EAAY,SAAW,EAAUC,EAC9B,KAAK,gBAAgBD,EAAaC,CAAW,CACtD,GAGF,QAAU,CACR,MAAMY,EAAqB,KAAK,OAAO,QAAU,KAAK,OAAO,QAAO,EAAK,CAAA,EACzE,OAAOnB,EAAAA,EACL,KAAK,YACL,CACE,UAAW,qBACX,MAAO,wBAET,KAAK,iBACDmB,EACAA,EAAmB,IAAIR,GAAS,KAAK,aAAaA,CAAK,CAAC,EAEhE,CACF"}