@dialpad/dialtone/dist/vue2/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 { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants';\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  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 this.$createElement(DtEmoji, {\n              props: { code: item, size: this.size },\n            });\n          }\n          return this.$createElement('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 VNode has no tag, it is a text node\n      if (!VNode.tag && VNode.text) {\n        return this.searchCodes(VNode.text);\n      }\n\n      const children = VNode.children ? VNode.children.map(VNodeChild => this.searchVNodes(VNodeChild)) : [];\n      return this.$createElement(VNode.tag, VNode.data, children);\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      return this.replaceDtEmojis(replaceList, textContent);\n    },\n  },\n\n  render (h) {\n    const defaultSlotContent = 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":["_sfc_main","DtEmoji","t","ICON_SIZE_MODIFIERS","replaceList","textContent","escapedReplaceList","item","regexp","VNode","children","VNodeChild","shortcodes","findShortCodes","emojis","findEmojis","h","defaultSlotContent"],"mappings":"4RASAA,EAAA,CACA,KAAA,qBAEA,WAAA,CACA,QAAAC,EAAAA,OACA,EAEA,MAAA,CAIA,YAAA,CACA,KAAA,OACA,QAAA,KACA,EAKA,KAAA,CACA,KAAA,OACA,QAAA,MACA,UAAAC,GAAA,OAAA,KAAAC,qBAAA,EAAA,SAAAD,CAAA,CACA,CACA,EAEA,MAAA,CACA,MAAA,CACA,iBAAA,EACA,CACA,EAEA,MAAA,SAAA,CACA,KAAA,iBAAA,EACA,EAEA,QAAA,CAKA,gBAAAE,EAAAC,EAAA,CACA,GAAA,CAAAD,EAAA,OAAA,OAAAC,EAEA,MAAAC,EAAAF,EAAA,IAAAG,GACAA,EAAA,QAAA,MAAA,KAAA,CACA,EAEAC,EAAA,IAAA,OAAA,IAAAF,EAAA,KAAA,GAAA,CAAA,IAAA,GAAA,EAGA,OAFAD,EAAA,MAAAG,CAAA,EAGA,OAAAD,GAAAA,EAAA,KAAA,IAAA,EAAA,EACA,IAAAA,GACAH,EAAA,SAAAG,CAAA,EACA,KAAA,eAAAN,UAAA,CACA,MAAA,CAAA,KAAAM,EAAA,KAAA,KAAA,IAAA,CACA,CAAA,EAEA,KAAA,eAAA,OAAA,CAAA,MAAA,4BAAA,EAAAA,CAAA,CACA,CACA,EAOA,aAAAE,EAAA,CAEA,GAAA,CAAAA,EAAA,KAAAA,EAAA,KACA,OAAA,KAAA,YAAAA,EAAA,IAAA,EAGA,MAAAC,EAAAD,EAAA,SAAAA,EAAA,SAAA,IAAAE,GAAA,KAAA,aAAAA,CAAA,CAAA,EAAA,CAAA,EACA,OAAA,KAAA,eAAAF,EAAA,IAAAA,EAAA,KAAAC,CAAA,CACA,EAGA,iCAAA,CAEA,EAOA,YAAAL,EAAA,CACA,MAAAO,EAAAC,EAAAA,eAAAR,CAAA,EACAS,EAAAC,EAAAA,WAAAV,CAAA,EAEAD,EAAA,CAAA,GAAAQ,EAAA,GAAAE,CAAA,EACA,OAAA,KAAA,gBAAAV,EAAAC,CAAA,CACA,CACA,EAEA,OAAAW,EAAA,CACA,MAAAC,EAAA,KAAA,OAAA,SAAA,CAAA,EACA,OAAAD,EACA,KAAA,YACA,CACA,UAAA,qBACA,MAAA,sBACA,EACA,KAAA,iBACAC,EACAA,EAAA,IAAAR,GAAA,KAAA,aAAAA,CAAA,CAAA,CACA,CACA,CACA"}