@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","names":[],"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 (!VNode) return;\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"],"mappings":"gRAMA,IAAM,GAAA,EAAA,EAAA,IAAA,EAAA,EAAA,yBAAyC,KAAK,CAAC,CAAC,KAMjD,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,qBAEN,WAAY,CACV,QAAA,EAAA,QACD,CAED,MAAO,CAIL,YAAa,CACX,KAAM,OACN,QAAS,MACV,CAKD,KAAM,CACJ,KAAM,OACN,QAAS,MACT,UAAY,GAAM,OAAO,KAAK,EAAA,oBAAoB,CAAC,SAAS,EAAE,CAC/D,CACF,CAED,MAAQ,CACN,MAAO,CACL,iBAAkB,GACnB,EAGH,MAAM,SAAW,CACf,KAAK,iBAAmB,IAG1B,QAAS,CAKP,gBAAiB,EAAa,EAAa,CACzC,GAAI,CAAC,EAAY,OAAQ,OAAO,EAEhC,IAAM,EAAqB,EAAY,IAAI,GACzC,EAAK,QAAQ,MAAO,MAAM,CAC3B,CAEK,EAAa,OAAO,IAAI,EAAmB,KAAK,IAAI,CAAC,GAAI,IAAI,CAGnE,OAFc,EAAY,MAAM,EAAO,CAGpC,OAAO,GAAQ,EAAK,MAAK,GAAM,GAAE,CACjC,IAAK,GACA,EAAY,SAAS,EAAK,EAC5B,EAAA,EAAA,GAAS,EAAA,QAAS,CAAE,KAAM,EAAM,KAAM,KAAK,KAAM,CAAC,EAEpD,EAAA,EAAA,GAAS,OAAQ,CAAE,MAAO,6BAA8B,CAAE,EAAK,CAC/D,EAQN,aAAc,EAAO,CACnB,GAAI,CAAC,EAAO,OACZ,GAAI,OAAO,GAAU,SAAU,OAAO,KAAK,YAAY,EAAM,CAC7D,GAAI,EAAM,OAAS,EAAc,OAAO,EACxC,GAAI,OAAO,EAAM,MAAS,SAAU,OAAO,KAAK,YAAY,EAAM,SAAS,CAC3E,GAAI,EAAM,OAAO,UAAW,OAAO,KAAK,aAAa,EAAM,MAAM,UAAU,CAE3E,IAAM,EAAW,MAAM,QAAQ,EAAM,SAAQ,CAAI,EAAM,SAAW,CAAC,EAAM,SAAS,CAClF,OAAA,EAAA,EAAA,GAAS,EAAM,KAAM,EAAM,MAAO,EAAS,IAAI,GAAc,KAAK,aAAa,EAAW,CAAC,CAAC,EAI9F,iCAAmC,GASnC,YAAa,EAAa,CACxB,IAAM,EAAa,EAAA,eAAe,EAAY,CACxC,EAAS,EAAA,WAAW,EAAY,CAEhC,EAAc,CAAC,GAAG,EAAY,GAAG,EAAO,CAE9C,OADI,EAAY,SAAW,EAAU,EAC9B,KAAK,gBAAgB,EAAa,EAAY,EAExD,CAED,QAAU,CACR,IAAM,EAAqB,KAAK,OAAO,QAAU,KAAK,OAAO,SAAQ,CAAI,EAAE,CAC3E,OAAA,EAAA,EAAA,GACE,KAAK,YACL,CACE,UAAW,qBACX,MAAO,uBACR,CACD,KAAK,iBACD,EACA,EAAmB,IAAI,GAAS,KAAK,aAAa,EAAM,CAAC,CAC9D,EAEJ"}